//
// Sidebar Sidenav & Secondary hover menu
// --------------------------------------------------

.nav-sidenav-secondary .dropdown-header {
  color: #b3b3b3;
  font-size: (@font-size-base - 1);
  padding-bottom: 10px;
  padding-left: @sidebar-os-padding-x-secondary;
  padding-top: 20px;
}

.sidebar-left {
  .navbar-sidebar {
    border-bottom: 0;
    border-left: 0;
    border-top: 0;
    margin: 0;
    min-height: 46px;
    &.visible-xs-block {
      border:0;
    }
    .sidebar-header {
      border: 0;
      padding-bottom: 0;
      margin: 0;
      display: block;
      &:before {
        content: " ";
        display: table;
      }
      &:after {
        content: " ";
        display: table;
        clear: both;
      }
      h2 {
        // make size, weight and height consistent with project list select
        color: @navbar-os-project-menu-color;
        font-size: 15px;
        margin-left: 20px;
        margin-top: 13px;
      }
      .navbar-toggle {
        margin:4px 10px 0;
        padding: 10px;
        .icon-bar {
          background: @navbar-pf-alt-color;
        }
        &:hover, &:focus {
          .icon-bar {
            background: @navbar-pf-alt-navbar-toggle-icon-bar-hover-bg;
          }
        }
      }
    }
    ul.nav-sidenav-primary > li {
      background: @sidebar-os-bg;
      border-bottom: 1px solid @sidebar-os-border-color;
      border-top: 1px solid @sidebar-os-border-inset-color;
      font-weight: 300;
      &.active {
        &,
        &:focus,
        &:hover,
        &.open {
          &,
         .dropdown-menu {
            background-color: @sidebar-os-active-bg;
          }
          .nav-sidenav-secondary > li a {
            &:focus,
            &:hover {
              background: @sidebar-os-dropdown-link-active-hover-bg;
            }
          }
        }
        > a {
          color: @sidebar-os-active-color;
          &:after {
            background-color: @sidebar-os-active;
            bottom: 0;
            content: '';
            display: block;
            left: 0;
            position: absolute;
            top: -1px;
            width: 3px;
          }
          .fa, .pficon {
            color: @sidebar-os-active;
          }
        }
      }
      &:focus,
      &:hover,
      &.open {
        background-color: @sidebar-os-hover-bg;
        > a {
          background-color: transparent;
          color: @sidebar-os-active-color;
          .fa, .pficon {
            color: @sidebar-os-active;
          }
        }
        .dropdown-menu {
          background-color: @sidebar-os-hover-bg;
        }
      }
      > a {
        color: @sidebar-os-color;
        &,
        &:focus,
        &:hover {
          background-color: transparent;
        }
        &.dropdown-toggle:focus {
          outline: thin dotted;
        }
        .fa, .pficon {
          color: @sidebar-os-icon-color;
          margin-right: 5px;
        }
        .fa-angle-right {
          display: none;
        }
      }
      .dropdown-menu {
        background-color: @sidebar-os-hover-bg;
      }
      .nav-sidenav-secondary > li {
        &.active a {
          &,
          &:hover {
            background: @sidebar-os-dropdown-link-active-bg !important;
            color: @sidebar-os-active-color;
          }
        }
        a {
          color: @sidebar-os-color;
          padding-left: @sidebar-os-padding-x-secondary;
          &:focus,
          &:hover {
            background: @sidebar-os-dropdown-link-hover-bg;
            color: @sidebar-os-active-color;
          }
        }
      }
    }
  }
}

.show-sidebar-right {
  .sidebar-right {
    background-color: @body-bg;
    .sidebar-header {
      border-color: @page-header-border-color;
      margin-bottom: 0;
      margin-top: 20px;
      h2 {
        margin-left: 20px;
      }
    }
    h3 {
      border-top: 1px solid darken(@page-header-border-color, 2%);
      margin-top: 0;
      padding-top: @line-height-computed;
      &:last-child {
        border-top: 0;
        padding-top: 0;
      }
    }
  }
}


@media (min-width: @screen-sm-min) {
  .sidebar-left {
    .navbar-sidebar {
      border-right: 1px solid @sidebar-os-border-color;
      border-bottom: 0;
      width: @sidebar-left-width-sm;
      position: absolute;
      top:1px;
      right:0;
      bottom: 0;
      left:0;
      .sidebar-header {
        display: none;
      }
      // Sidebar hover menu
      .hover-nav.dropdown-menu {
        border: 0;
        border-radius: 0;
        .box-shadow(2px 2px 2px rgba(0, 0, 0, 0.125));
        left: 100%;
        margin: 0 0 0 1px;
        min-width: 230px;
        position: absolute;
        padding: 10px;
        top: -2px;
      }
      ul.nav-sidenav-primary {
        border-bottom: 1px solid @sidebar-os-border-inset-color;
        > li {
          position: relative;
          &.open {
            > a:before {
              // connect tab and hover-nav
              background-color: @sidebar-os-hover-bg;
              bottom: 0;
              content: '';
              display: block;
              right: -1px;
              position: absolute;
              top: -1px;
              width: 1px;
            }
            &.active > a:before {
              background-color: @sidebar-os-active-bg;
            }
          }
          > a {
            padding: @sidebar-os-padding-x @sidebar-os-padding-y;
            text-align: center;
            .fa, .pficon {
              display: block;
              font-size: 20px;
              margin-right: 0;
              padding-bottom: 5px;
            }
            .fa-angle-right {
              display: block;
              font-size: 16px;
              position: absolute;
              right: 13px;
              top: 37%;
            }
            span {
              display: block;
              margin: 0;
            }
          }
          .hover-nav ul.nav-sidenav-secondary li a {
            padding-left: 15px;
          }
        }
      }
    }
  }
  .nav-sidenav-secondary .dropdown-header {
    padding-left: 15px;
  }
}

@media (min-width: @screen-lg-min) {
  .sidebar-left {
    .navbar-sidebar {
      font-size: @font-size-base + 1;
      .nav-sidenav-secondary.hover-nav.dropdown-menu {
        font-size:  @font-size-base + 1;
      }
      ul.nav-sidenav-primary > li {
        > a {
          padding-bottom: @sidebar-os-padding-y + 10;
          padding-top: @sidebar-os-padding-y + 10;
          .fa-angle-right {
            font-size: 18px;
          }
        }
      }
    }
  }
}

@media (min-width: @screen-xlg-min) {
  .sidebar-left {
    .navbar-sidebar {
      ul.nav-sidenav-primary > li {
        > a {
          text-align: left;
          padding: (@sidebar-os-padding-x);
          .fa, .pficon {
            .primary-nav-icon-xl();
          }
          .fa-angle-right {
            height: 18px;
            left: auto;
            padding: 0;
            position: absolute;
            right: 5px;
            text-align: right;
            top: 23px;
          }
          .pficon {
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.events-sidebar-expand {
  font-size: 16px;

  a {
    text-decoration: none;
  }
}

.events-sidebar {
  .pficon {
    vertical-align: middle;
  }
  .events-sidebar-collapse {
    font-size: 16px;
    margin-right: 12px;

    a {
      text-decoration: none;
    }
  }
  .sidebar-header.right-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    // So that sidebar bottom border aligns with main content header bottom border.
    margin-top: 17.5px;
    h2 {
      .h4();
      display: inline-block;
    }
    .warning-count {
      .nowrap();
      margin-left: 2px;
      .pficon {
        vertical-align: -1px;
      }
    }
    .event-details-link {
      .small();
      margin-right: 20px;
    }
  }
  .right-content {
    .events {
      padding-top: 10px;
    }
    .event {
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      padding: 10px 20px;
      &.highlight {
        background-color: @list-view-expanded-bg;
        border-bottom-width: 0;
        border-color:  @table-border-color !important;
      }
      + .event {
        border-top: 1px solid #ededed;
      }
      .event-icon {
        font-size: 18px;
        margin-right: 10px;
        min-width: 18px;
      }
      .event-details {
        .truncate();
        flex-grow: 1;
        .detail-group {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .event-reason, .event-object, .event-message {
          .truncate();
        }
        .event-message {
          .small();
        }
        .event-timestamp {
          .small();
          .text-muted();
        }
        @media (min-width: @screen-lg-min) {
          .detail-group {
            flex-direction: row;
          }
          .event-object {
            order: 1;
          }
          .event-reason {
            order: 2;
          }
          .event-timestamp {
            .text-right();
            margin-left: 5px;
            min-width: 100px;
          }
        }
      }
    }

    .event.highlight + .event {
      border-top: 1px solid #d1d1d1;
    }
  }
}

.events-badge {
  font-size: 14px;
  &:hover {
    text-decoration: none;
    .event-label {
      text-decoration: underline;
    }
  }
  .event-count {
    color: @text-color;
  }
  .pficon-info {
    color: @text-muted;
  }
}
